<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>乘法表练习</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			
			span{
				display:inline-block;
				width:75px;
				height:30px;
				margin:5px;
				line-height:30px;
				text-align:center;
				border:1px solid red;	
				animation:am 10s forwards;
			}
			
			@keyframes am{
				0%{
					transform:rotate(0deg);
					opacity: 0;
				}
				50%{
					transform:rotate(180deg);
					opacity: .5;
				}
				100%{
					transform:rotate(360deg);
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script src="../js/dom.js"></script>
		<script type="text/javascript">
			var oBox= dom("box");
			for(var i=1;i<=9;i++) {
				for(var j=1;j<=i;j++){
					oBox.innerHTML += `<span>${i}+${j}=${i*j}</span>`;
				}
				oBox.innerHTML +="<br />"; 
			}	
			oBox.innerHTML +="<hr />";
			for(var i=9;i>=1;i--) {
				for(var j=i;j>=1;j--){
					oBox.innerHTML += `<span>${i}+${j}=${i*j}</span>`;
				}
				oBox.innerHTML +="<br />"; 
			}	
			oBox.innerHTML +="<hr />";
			for(var i=1;i<=9;i++) {
				for(var j=i;j<=9;j++){
					oBox.innerHTML += `<span>${i}+${j}=${i*j}</span>`;
				}
				oBox.innerHTML +="<br />"; 
			}	
		</script>	
	</body>
</html>
